<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-Axios案例</title>
</head>
<body>

    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr height="50px">
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>
            
            <tr align="center" v-for="(emp,index) in emps">
                <td> {{index + 1}} </td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>    
                <td><span v-if="emp.gender == 1">男</span> <span v-if="emp.gender == 2">女</span></td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            emps: []
        },
        methods: {
        },
        mounted () {
            //发起异步请求加载数据
            axios.get("http://yapi.lkweixin.com/mock/6377/emp/list").then((result) => {
                this.emps = result.data.data;  
            });
        }
    })
</script>
</html>